<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">出租信息</small>
      </a>
    </header>
    <main>
      <div class="seachfrom">
        <div class="seachbox">
          <el-input placeholder="请输入内容" v-model="seachtext" class="input-with-select">
  
            <el-select v-model="seachselect" slot="prepend" style="width:105px" @change="valuechange(seachselect)">
              <el-option v-for="item in selectoptions" :label="item.label" :value="item.value" :key="item.value">
              </el-option>
            </el-select>
            <el-button slot="append" icon="search" @click="seach()"></el-button>
          </el-input>
        </div>
      </div>
      <div>
        <!-- <v-loadmore :top-method="loadTop" :bottom-method="loadBottom" :auto-fill="false" ref="loadmore"> -->
          <ul class="datalist"  v-if="this.seachselect === '0'">
            <li v-for="(item,index) in listData" :key='item.unid'>
              <router-link :to='{name: "RentalInfodetail",query:{unid: item.unid,keys:1}}'>
                <div class="items-img">
                   <img src="../../../img/zhaozu.png" /> 
                </div>
                <div class="items-text">
                  <p>物业名称: {{item.values[5]}}</p>
                  <p>租赁面积: {{item.values[23]}}</p>
                  <p>招租环节<span>{{item.values[11]}}</span></p>
                </div>
              </router-link>
            </li>
          </ul>
          <ul class="datalist" v-else-if="this.seachselect === '1'">
            <li v-for="(item,index) in listData" :key='item.unid'>
              <router-link :to='{name: "RentalInfodetail",query:{unid: item.values[10],keys:2}}'>
                <div class="items-img">
                <img src="../../../img/czwc.png" />
                </div>
                <div class="items-text">
                  <p>物业名称: {{item.values[0]}}</p>
                  <p>租赁面积: {{item.values[5]}}</p>
                  <p>招租环节<span>{{item.values[9]}}</span></p>
                </div>
              </router-link>
            </li>
          </ul>
          <ul class="datalist" v-else-if="this.seachselect === '2'">
            <li v-for="(item,index) in listData" :key='item.unid'>
              <router-link :to='{name: "RentalInfodetail",query:{unid: item.unid,keys:3}}'>
                <div class="items-img">
                 <img src="../../../img/qdht.png" /> 
                </div>
                <div class="items-text">
                  <p>物业名称: {{item.values[0]}}</p>
                  <p>租赁面积: {{item.values[5]}}</p>
                  <p>招租环节<span>{{item.values[10]}}</span></p>
                </div>
              </router-link>
            </li>
          </ul>
        <!-- </v-loadmore> -->
        <div class="none_data" v-show="nonedata">
          <img src="../../../img/tip.png">
        </div>
        <v-backtop></v-backtop>
      </div>
    </main>
  </div>
</template>

<script type="text/ecmascript-6">
  /*过滤器*/
  import {
    Loadmore
  } from 'mint-ui';
  import backToTop from '@/components/backToTop'
  import {
    LeaseManagement,
    ContractManagement,
    BidManagement
  } from '../../../api/api';
  
  export default {
    components: {
      'v-loadmore': Loadmore,
      'v-backtop': backToTop
    },
    data() {
      return {
        nonedata: false,
        PageSize: 10,
        CurrentPage:1,
        CriteriaList: [],
        listData: [],
        seachtext: '',
        selectoptions: [{
          value: "0",
          label: "招租环节"
        }, {
          value: "1",
          label: "招租完成"
        }, {
          value: "2",
          label: "合同签订"
        }],
        seachselect:"0",
        nonedata: false,
      };
    },
    computed: {
        filterlist: function () {  
               return this.listData.filter(function (number) {  
                  return number.values[11]=="已发布"  
                })  
        }
    },
    methods: {
      loadTop: function() { //组件提供的下拉触发方法  
        //下拉刷新
        if (this.CurrentPage >= 0) {
           this.CurrentPage = 1;
           this.listData = [];
           this.valuechange(this.seachselect,this.CurrentPage);
        } else {
          this.listData = [];
          this.valuechange(this.seachselect);
        }
        this.$refs.loadmore.onTopLoaded();   
      },
      loadBottom: function() {
        //上拉加载  
         this.CurrentPage += 1;
         this.valuechange(this.seachselect);
        // 上拉触发的分页查询  
        //this.allLoaded = true;
        this.$refs.loadmore.onBottomLoaded();
      },
      //搜索
      seach: function() {
        this.listData = [];
        this.CriteriaList = this.seachtext
        this.valuechange(this.seachselect);
      },
       
      //  getData() {
      //    let CurrentPageNum = this.CurrentPage
      //    let options  = {
      //     params: {
      //         vc: this.PageSize,
      //         vp: this.CurrentPage,
      //         vf:this.CriteriaList
      //     }
      //   }
      //   //调取接口
      //   LeaseManagement(options).then((res) => {
      //     this.listData=this.listData.concat(res)
      //   })
      // },
   
      valuechange(val) {
         this.listData=[]//清空
         let CurrentPageNum = this.CurrentPage
         let options  = {
          params: {
             // vc: this.PageSize,
              //vp: this.CurrentPage,
              vf:this.CriteriaList
          }
        } 
         
        //调取接口
        if (val == 0 || val == null) {
          LeaseManagement(options).then((res) => {
            this.listData=res
             return this.listData.filter(function (number) {  
                  return number.values[11]=="已发布"  
                })  
           
          });
        } else if (val == 1) {
          BidManagement(options).then((res) => {
            this.listData = this.listData.concat(res)
          });
        } else{
          ContractManagement(options).then((res) => {
            this.listData = this.listData.concat(res)
          })
  
        }
      },
      //数据加载方法
    },
    computed: {
  
    },
    //页面加载时候
    mounted() {
    this.valuechange()
    }
  
  }
</script>

初始化

点击切换接口

上拉加载接口

下拉加载借口




<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
  .el-select .el-input {
    width: 120px !important
  }
 
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>

